<template>
    <div class="uploadBox">
        <!-- 返回主页 -->
        <div class="homeBox">
            <router-link to="/">
                <el-tooltip content="返回列表页面" placement="top">
                    <i class="el-icon-tickets"></i>
                </el-tooltip>
            </router-link>
        </div>

        <!-- 上传文件按钮 -->
        <div class="buttonBox">
            <el-upload
                action
                accept=".xlsx, .xls"
                :auto-upload="false"
                :show-file-list="false"
                :on-change="handle"
            >
                <el-button type="primary" slot="trigger">选取EXCEL文件</el-button>
            </el-upload>

            <el-button type="success" @click="submit" :disabled="disable">采集数据提交</el-button>
        </div>

        <!-- 解析出来的数据 -->
        <div class="tableBox" v-show="show">
            <h3>
                <i class="el-icon-info"></i>
                小主，以下是采集完成的数据，请您检查无误后，点击“采集数据提交”按钮上传至服务器哦！
            </h3>

            <el-table :data="tempData" style="width: 100%" :height="height" border>
                <el-table-column prop="name" label="姓名" min-width="50%"></el-table-column>
                <el-table-column prop="phone" label="电话" min-width="50%"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import xlsx from "xlsx";
import { Loading } from "element-ui";
import { readFile, character, delay } from "./assets/lib/utils";
import { createAPI } from "./api/index";
export default {
    name: "Upload",
    data() {
        return {
            height: document.documentElement.clientHeight - 130,
            tempData: [],
            show: false,
            disable: false
        };
    },
    methods: {
        // 采集EXCEL数据
        async handle(ev) {
            let file = ev.raw;
            if (!file) return;

            this.show = false;
            //这个方式的loading提示是异步的
            let loadingInstance = Loading.service({
                text: "小主，请您稍等片刻，奴家正在玩命处理中！",
                background: "rgba(0,0,0,.5)"
            });

            await delay(100);
            //读取FILE中的数据（变为JSON格式）
            let data = await readFile(file);
            let workbook = xlsx.read(data, { type: "binary" }),
                // 拿到第一个sheet表的数据
                worksheet = workbook.Sheets[workbook.SheetNames[0]];

            // 把数据解析成json数据
            data = xlsx.utils.sheet_to_json(worksheet);

            //把读取出来的数据变为最后可以传递给服务器的数据（姓名：name  电话：phone）
            let arr = [];
            data.forEach(item => {
                console.log(item.__rowNum__);
                let obj = {};
                for (let key in character) {
                    if (!character.hasOwnProperty(key)) break;
                    let v = character[key],
                        text = v.text,
                        type = v.type;
                    v = item[text] || "";
                    type === "string" ? (v = String(v)) : null;
                    type === "number" ? (v = Number(v)) : null;
                    obj[key] = v;
                }
                arr.push(obj);
            });

            await delay(100);
            // 展示到页面中
            this.show = true;
            this.tempData = arr;
            loadingInstance.close();
        },
        // 提交数据给服务器
        async submit() {
            if (this.tempData.length <= 0) {
                this.$message({
                    message: "小主，请您先选择EXCEL文件！",
                    type: "warning",
                    showClose: true
                });
                return;
            }

            // 开始上传后提交按钮禁用，防抖
            this.disable = true;
            let loadingInstance = Loading.service({
                text: "小主，请您稍等片刻，奴家正在玩命处理中！",
                background: "rgba(0,0,0,.5)"
            });

            // 完成后处理的事情
            let complate = () => {
                this.$message({
                    message: "小主，奴家已经帮您把数据上传了！",
                    type: "success",
                    showClose: true
                });
                this.show = false;
                this.disable = false;
                loadingInstance.close();
            };

            // 需要把数据一条条传递给服务器，也可以一次性全部传给服务器，此处是前者
            // 如果这其中有上传失败的条数，可以定义一个数组去保存上传成功的，然后和原始数据做对比就知道哪些成功哪些失败了
            let n = 0;
            let send = async () => {
                if (n > this.tempData.length - 1) {
                    // 都传递完了
                    complate();
                    return;
                }
                let body = this.tempData[n];
                let result = await createAPI(body);
                if (parseInt(result.code) === 0) {
                    // 成功
                    n++;
                } else {
                    console.log(result);
                }
                send();
            };
            send();
        }
    }
};
</script>
<style lang='less' scoped>
.homeBox {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    font-size: 35px;
}

.uploadBox {
    padding: 20px;
}

.buttonBox {
    display: flex;

    .el-button {
        margin-left: 20px;
    }
}

.tableBox {
    h3 {
        font-size: 16px;
        font-weight: normal;
        line-height: 50px;
        color: lightcoral;
    }
}
</style>